<template>
	<!-- 日志-->
	<div class="heightMax order publicbox" v-loading='loading'>
		<div class="header">
			<el-row :gutter="10">
				<el-col :span="5">
					<span class="font14" style="min-width: 60px;">关键词：</span>
					<el-input size="mini" @keyup.enter.native="find" placeholder="请按照关键词查找" clearable v-model="query"></el-input>
				</el-col>
				<el-col :span="5">
					<span class="font14" style="min-width: 70px;">日志类型：</span>
					<el-select size="mini" v-model="logeType" placeholder="请选择日志类型" clearable>
						<el-option v-for="(item,index) in logeTypeArr" :value="item.value" :label="item.label" :key='index'>
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
					<span class="font14">日志时间：</span>
					<el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="mini" v-model="searchTime"
					 type="datetimerange" range-separator="—" start-placeholder="起始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-col>
				<el-col :span="1.5">
					<el-button size="mini" type="primary" icon="el-icon-search" @click='find'>搜索</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button size="mini" icon="el-icon-delete" @click='reset'>重置</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button size="mini" icon="el-icon-delete" @click='clearLog'>清空日志</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="5">
					<span class="font14" style="min-width: 50px;">调试：</span>
					<el-switch v-model="refresh" active-text="开启" inactive-text="关闭" @change="switchChange">
					</el-switch>
				</el-col>
				<el-col :span="5">
					<span class="font14" style="min-width: 50px;">实时刷新：</span>
					<el-switch v-model="RefreshAgain" active-text="开启" inactive-text="关闭" @change="listAgain">
					</el-switch>
				</el-col>

			</el-row>
		</div>
		<!-- 表格 -->
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @selection-change="selectChange"
				 style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="时间">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.create_time" placement="top">
								<span class="speSpan">{{scope.row.create_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="操作者">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.create_by" placement="top">
								<span class="speSpan">{{scope.row.create_by}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="日志" min-width="400px">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.log" placement="top">
								<span class="speSpan">{{scope.row.log}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
		<transition name='el-fade-in'>
			<addAndCompile v-if='addAndCompileShow' :isAddOrComp='isAddOrComp' :addAndCompileShow='addAndCompileShow'
			 @detailMaskShow='detailMaskShow' :rowId='rowId'></addAndCompile>
		</transition>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading
	} from "@/common.js";
	import addAndCompile from "./addAndCompile"
	export default {
		mounted() {
			this.getTableList()
			this.isRefresh()
		},
		components: {
			addAndCompile
		},
		data() {
			return {
				total: 10,
				page: 1,
				page_size: 10,
				query: '',
				registry_status: '',
				expire: '',
				mainCompany: '',
				loading: false,
				tableData: [],
				fileList: [],
				dialogVisible: false,
				disableBtn: true,
				batchDisable: true,
				//弹窗
				detailShow: false,
				addAndCompileShow: false,
				isAddOrComp: 1,
				deleteArr: [],
				complieBtn: true,
				rowId: '',
				upBtnLoading: false,
				logeType: '',
				logeTypeArr: [{
					value: 0,
					label: '操作日志'
				}, {
					value: 1,
					label: '系统日志'
				}, {
					value: 2,
					label: '调试日志'
				}],
				searchTime: [],
				refresh: false,
				RefreshAgain: false,
				timer: null
			}
		},
		computed: {
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			}
		},
		methods: {
			clearLog() {
				if (this.logeType || this.logeType === 0) {
					let mess = ''
					if (this.logeType == 0) {
						mess = '操作日志'
					} else if (this.logeType == 1) {
						mess = '系统日志'
					} else if (this.logeType == 2) {
						mess = '调试日志'
					}
					this.$confirm(`此操作将永久删除${mess}, 是否继续?`, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let data = {
							log_type: this.logeType,
						}
						axiosDelete('/user/logsV2/', data, (res) => {
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.getTableList()
							} else {
								this.$message.error(res.detail.result)
							}
						})
					}).catch(() => {

					});
				} else {
					this.$message.info('请先选择要清除的日志类型')
				}
			},
			listAgain(val) {
				if (!val) {
					clearInterval(this.timer);
				} else {
					this.timer = setInterval(() => {
						this.getTableList()
					}, 10000)
				}
				this.$once('hook:beforeDestroy', () => {
					clearInterval(this.timer);
				})
			},
			switchChange(val) {
				let data = {
					refresh: val ? 1 : 0
				}
				axiosPost('/user/refresh/', data, (res) => {
					if (res.code == 0) {
						this.getTableList()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			isRefresh() {
				axiosGet('/user/refresh/', '', (res) => {
					if (res.code == 0) {
						this.refresh = !!res.detail.refresh
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//获取表格数据
			getTableList() {
				// var UTFTranslate = {
				// Change:function(pValue){
				// return pValue.replace(/[^\u0000-\u00FF]/g,function($0){return escape($0).replace(/(%u)(\w{4})/gi,"&#x$2;")});
				// },
				// ReChange:function(pValue){
				// return unescape(pValue.replace(/&#x/g,'%u').replace(/\\u/g,'%u').replace(/;/g,''));
				// }
				// };
				this.loading = true
				let startTime = ''
				let endTime = ''
				if (this.searchTime.length != 0) {
					startTime = this.searchTime[0]
					endTime = this.searchTime[1]
				}
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words: this.query,
					log_type: this.logeType,
					time_from: startTime,
					time_to: endTime
				}
				axiosGet('/user/logsV2/', params, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						// this.tableData.map({
							
						// })
					} else {
						this.$message({
							type: 'error',
							message: res.detail.result
						})
					}
					this.loading = false
				})
			},
			//行选中
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			//选中多行
			selectChange(res) {
				console.log(res)
				if (res.length == 0) {
					this.disableBtn = true
					this.batchDisable = true
					this.rowId = res[0].id
				} else {
					if (res.length == 1) {
						this.disableBtn = false
						this.batchDisable = true
					} else {
						this.disableBtn = true
						this.batchDisable = false
					}
				}
				this.deleteArr = res
			},
			//搜索
			find() {
				this.page = 1
				this.page_size_count = 10
				this.getTableList()
			},
			//重新加载
			reset() {
				this.page = 1
				this.page_size_count = 10
				this.query = ''
				this.logeType = ''
				this.searchTime = []
				this.getTableList()
			},
			//分页器数量变化
			handleSizeChange(currentSize) {
				this.page_size = currentSize
				this.getTableList()
			},
			//分页器页数变化
			handleCurrentChange(currentPage) {
				this.page = currentPage
				this.getTableList()
			},
		}
	}
</script>

<style lang="less" scoped>
	.pag {
		margin-top: 10px;
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.ball {
		width: 21px;
		height: 21px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.el-col {
		display: flex;
		align-items: center;

		span {
			float: left;
			min-width: 80px;
		}
	}
</style>
